<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="HTML, CSS, JavaScript">
    <title>小杨知行 - Gallery</title>
    <link rel="stylesheet" href="styles.css">
    <script src="scripts.js" defer></script>
</head>

<body>
    <button class="like-button" onclick="handleLike(event)">
        <span id="likeCount" class="like-count">0</span>
        ♥
    </button>

    <div class="container">
        <header>
            <h1 class="main-title">"小杨知行"的 <span class="show-text">Gallery</span></h1>
            <hr class="title-divider">
            <p class="main-subtitle">记录生活的点点滴滴</p>
        </header>

        <!-- 轮播组件容器 -->
        <div class="carousel-container">
            <!-- 生活照片轮播 -->
            <div class="carousel-section">
                <h3 class="carousel-title">生活剪影</h3>
                <div class="carousel" id="lifeCarousel">
                    <button class="carousel-button prev">❮</button>
                    <div class="carousel-track">
                        <img src="selfPhotograph0.JPG" alt="生活照片1">
                        <img src="selfPhotograph1.JPG" alt="生活照片2">
                        <img src="selfPhotograph2.JPG" alt="生活照片3">
                    </div>
                    <button class="carousel-button next">❯</button>
                    <div class="carousel-dots"></div>
                </div>
            </div>

            <!-- 吉他演奏轮播 -->
            <div class="carousel-section">
                <h3 class="carousel-title">吉他时光</h3>
                <div class="carousel" id="guitarCarousel">
                    <button class="carousel-button prev">❮</button>
                    <div class="carousel-track">
                        <img src="Guitar1.JPG" alt="吉他照片1">
                        <img src="Guitar2.JPG" alt="吉他照片2">
                    </div>
                    <button class="carousel-button next">❯</button>
                    <div class="carousel-dots"></div>
                </div>
            </div>

            <!-- 见来照片轮播 -->
            <div class="carousel-section">
                <h3 class="carousel-title">《剑来》</h3>
                <div class="carousel" id="jianlaiCarousel">
                    <button class="carousel-button prev">❮</button>
                    <div class="carousel-track">
                        <img src="Jianlai1.JPG" alt="剑来照片1">
                        <img src="Jianlai2.JPG" alt="剑来照片2">
                        <img src="Jianlai3.JPG" alt="剑来照片3">
                        <img src="Jianlai4.JPG" alt="剑来照片4">
                    </div>
                    <button class="carousel-button next">❯</button>
                    <div class="carousel-dots"></div>
                </div>
            </div>

            <!-- 摄影作品轮播 -->
            <div class="carousel-section">
                <h3 class="carousel-title">摄影烟火</h3>
                <div class="carousel" id="photographCarousel">
                    <button class="carousel-button prev">❮</button>
                    <div class="carousel-track">
                        <img src="Photograph1.JPG" alt="摄影作品1">
                        <img src="Photograph2.JPG" alt="摄影作品2">
                        <img src="Photograph3.JPG" alt="摄影作品3">
                    </div>
                    <button class="carousel-button next">❯</button>
                    <div class="carousel-dots"></div>
                </div>
            </div>

            <!-- 阅读时光轮播 -->
            <div class="carousel-section">
                <h3 class="carousel-title">阅读之旅</h3>
                <div class="carousel" id="readingCarousel">
                    <button class="carousel-button prev">❮</button>
                    <div class="carousel-track">
                        <img src="Reading0.JPG" alt="阅读照片1">
                        <img src="Reading1.JPG" alt="阅读照片2">
                        <img src="Reading2.JPG" alt="阅读照片3">
                    </div>
                    <button class="carousel-button next">❯</button>
                    <div class="carousel-dots"></div>
                </div>
            </div>
        </div>

        <div class="back-to-home">
            <a href="index.html" class="home-link">返回首页</a>
        </div>
    </div>
</body>

</html> 